// 我们自己的插件
// 实现一个插件
// 实现VueRouter类
// 处理路由选项
// 监控路由变化 hashchange
// 响应这个变化
// 实现install方法
import Link from './krouter-link';
import View from './Krouter-view'
let Vue;
class KVueRouter {
    constructor(options) {
        console.log(options)
        this.$options = options
        // current 必须是响应式的
        // 如何做到？
        // set只能在响应式对象上动态添加新属性
        // const initial = window.location.hash.slice(1) || '/'
        this.current = window.location.hash.slice(1) || '/'
        Vue.util.defineReactive(this, 'matched', [])
        // match方法可以递归遍历路由表，获取匹配关系的数组
        this.match()
        // window.addEventListener('hashchange', () => {
            // console.log(this.current)
            // this.current = window.location.hash.slice(1)
        // })
        window.addEventListener('hashchange',this.onHashChange.bind(this))
        window.addEventListener('load',this.onHashChange.bind(this))
    }
    
    onHashChange () {
        this.current = window.location.hash.slice(1)
        this.matched = []
        this.match()
    }

    match(routes){
        routes = routes || this.$options.routes
        for(const route of routes){
            // 递归遍历
            // console.log(this.matched)
            if(route.path === '/' && this.current === '/'){
                this.matched.push(route)
                return
            }
            // /about/info
            if(route.path !== '/' && this.current.indexOf(route.path) != -1){
                this.matched.push(route)
                if(route.children){
                    // console.log(this.matched)
                    this.match(route.children)
                }
                return 
            }
        }
    }
}



// Vue插件：需要实现一个静态方法install
// install(vue,...)
// 参数是Vue.use调用时传入的
KVueRouter.install = function (_Vue) {
    Vue = _Vue

    // $router 注册
    // 混入：Vue.mixin({beforeCreate(){}})
    // 全局混入目的：延迟下面逻辑到router船舰完毕并且附加到选项上时才执行
    Vue.mixin({
        beforeCreate() {
            // 此钩子每个组件创建实例时都会调用
            // 如果当前this是根组件，它选项中必须有一个router
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router
            }
        },
    })

    // 实现两个全局组件：router-view router-link
    // Vue.component('Krouter-link', {
    //     props: {
    //         to: {
    //             type: String,
    //             required: true
    //         }
    //     },
    //     render(h) {
    //         return h(
    //             'a',
    //             { 
    //                 attrs: {
    //                     href: "#" + this.to 
    //                 }
    //             },
    //             this.$slots.default
    //         )
    //     },
    // })
    // Vue.component('Krouter-view', {
    //     // render 什么时候会执行
    //     // init
    //     // 响应式数据变化会再次执行
    //     render(h) {
    //         // 1.根据 获取hash 部分/about   
    //         let component = null
    //         const route = this.$router.$options.routes.find(
    //             (route) => route.path === this.$router.current
    //         );
    //         if(route){
    //             component = route.component
    //         }
    //         // this.$router.$options.routes
    //         // 2.根据上面地址获取对应组件配置About
    //         // 3.h(About) 
    //         return h(component)
    //     }
    // })
    Vue.component('Krouter-view',View)
    Vue.component('Krouter-link',Link)
}

export default KVueRouter